<template>
  <p>通过属性 batches 实现批量操作按钮自定义，可通过 batchClick 属性监听按钮操作，返回对表格刷新或重置的状态</p>
  <p>批量操作仅在选中列展示时生效</p>
  <MerakXTable
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :columns="state.columns"
    :data="state.data"
    :pagination="false"
    :column-type="['selection']"
    :batches="[{ type: 'delete', text: '批量删除', color: 'red' }]"
    :batch-click="handleBatchClick"
  ></MerakXTable>

  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const html = ref(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="false"
      :column-type="['selection']"
      :batches="[{ type: 'delete', text: '批量删除', color: 'red' }]"
      :batch-click="handleBatchClick"
    ></MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleBatchClick: MerakXTableInstance["batchClick"] = async params => {
  console.log(params);
  return {
    refresh: false,
    reset: false,
  };
};
<\/script>
`);

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleBatchClick: MerakXTableInstance["batchClick"] = async params => {
  console.log(params);
  return {
    refresh: false,
    reset: false
  };
};
</script>
